// eslint-disable-next-line
<template>
	<div class="emoji-content">
		<div class="emoji-content-item">
			<span @click="addEmoji('😃')">😃</span>
			<span @click="addEmoji('😁')">😁</span>
			<span @click="addEmoji('😂')">😂</span>
			<span @click="addEmoji('😄')">😄</span>
			<span @click="addEmoji('😅')">😅</span>
			<span @click="addEmoji('😆')">😆</span>
			<span @click="addEmoji('😇')">😇</span>
			<span @click="addEmoji('😈')">😈</span>
			<span @click="addEmoji('😉')">😉</span>
		</div>
		<div class="emoji-content-item">
			<span @click="addEmoji('😊')">😊</span>
			<span @click="addEmoji('😋')">😋</span>
			<span @click="addEmoji('😌')">😌</span>
			<span @click="addEmoji('😍')">😍</span>
			<span @click="addEmoji('😎')">😎</span>
			<span @click="addEmoji('😏')">😏</span>
			<span @click="addEmoji('😐')">😐</span>
			<span @click="addEmoji('😒')">😒</span>
			<span @click="addEmoji('😓')">😓</span>
		</div>
		<div class="emoji-content-item">
			<span @click="addEmoji('❓')">❓</span>
			<span @click="addEmoji('😕')">😕</span>
			<span @click="addEmoji('😖')">😖</span>
			<span @click="addEmoji('😗')">😗</span>
			<span @click="addEmoji('😘')">😘</span>
			<span @click="addEmoji('😙')">😙</span>
			<span @click="addEmoji('😚')">😚</span>
			<span @click="addEmoji('😜')">😜</span>
			<span @click="addEmoji('😝')">😝</span>
		</div>
		<div class="emoji-content-item">
			<span @click="addEmoji('😞')">😞</span>
			<span @click="addEmoji('😟')">😟</span>
			<span @click="addEmoji('😠')">😠</span>
			<span @click="addEmoji('😡')">😡</span>
			<span @click="addEmoji('😢')">😢</span>
			<span @click="addEmoji('😣')">😣</span>
			<span @click="addEmoji('😤')">😤</span>
			<span @click="addEmoji('😥')">😥</span>
			<span @click="addEmoji('😦')">😦</span>
		</div>
		<div class="emoji-content-item">
			<span @click="addEmoji('😨')">😨</span>
			<span @click="addEmoji('😩')">😩</span>
			<span @click="addEmoji('😪')">😪</span>
			<span @click="addEmoji('😫')">😫</span>
			<span @click="addEmoji('😬')">😬</span>
			<span @click="addEmoji('😭')">😭</span>
			<span @click="addEmoji('😮')">😮</span>
			<span @click="addEmoji('😯')">😯</span>
			<span @click="addEmoji('😰')">😰</span>
		</div>
		<div class="emoji-content-item">
			<span @click="addEmoji('😲')">😲</span>
			<span @click="addEmoji('😳')">😳</span>
			<span @click="addEmoji('😴')">😴</span>
			<span @click="addEmoji('😵')">😵</span>
			<span @click="addEmoji('🧐')">🧐</span>
			<span @click="addEmoji('😷')">😷</span>
			<span @click="addEmoji('🙁')">🙁</span>
			<span @click="addEmoji('🙂')">🙂</span>
			<span @click="addEmoji('🙃')">🙃</span>
		</div>
		<div class="emoji-content-item">
			<span @click="addEmoji('🤐')">🤐</span>
			<span @click="addEmoji('🤑')">🤑</span>
			<span @click="addEmoji('🤒')">🤒</span>
			<span @click="addEmoji('🤓')">🤓</span>
			<span @click="addEmoji('🤔')">🤔</span>
			<span @click="addEmoji('🤕')">🤕</span>
			<span @click="addEmoji('🤠')">🤠</span>
			<span @click="addEmoji('🤡')">🤡</span>
			<span @click="addEmoji('🤢')">🤢</span>
		</div>
		<div class="emoji-content-item">
			<span @click="addEmoji('🤤')">🤤</span>
			<span @click="addEmoji('🤥')">🤥</span>
			<span @click="addEmoji('🤧')">🤧</span>
			<span @click="addEmoji('🤨')">🤨</span>
			<span @click="addEmoji('🤩')">🤩</span>
			<span @click="addEmoji('🤪')">🤪</span>
			<span @click="addEmoji('🤫')">🤫</span>
			<span @click="addEmoji('🤬')">🤬</span>
			<span @click="addEmoji('🤭')">🤭</span>
		</div>
	</div>
</template>

<script>
export default {
	// eslint-disable-next-line vue/multi-word-component-names
	name: 'emoji',
	methods: {
		addEmoji(emoji) {
			this.$emit('addEmoji', emoji);
		}
	}
};
</script>
<style scoped>
.emoji-content {
	max-height: 216px;
	overflow-y: scroll;
}
.emoji-content-item {
	font-size: 24px;
	display: flex;
	align-items: center;
	justify-content: space-around;
}
.emoji-content-item span {
	display: inline-block;
	padding: 4px;
	cursor: pointer;
}
</style>
